<script setup lang="ts">

defineProps<{
  data: {
    lat: number,
    long: number
  }
}>()

</script>

<template>
  <div class="gforce">
    <!-- <div class="line longitudinal">
      <div class="bar" v-for="i of 21" :class="{ active: (i < 11 && data.long > 0 && (11 - i) / (data.long * 10) <= 1) || i > 11 && data.long < 0 && (11 - i) / (data.long * 10) <= 1, origin: i == 11 }"></div>
    </div>
    <div class="line lateral">
      <div class="bar" v-for="i of 21" :class="{ active: (i > 11 && data.lat < 0 && (i - 11) / (-data.lat * 10) <= 1) || i < 11 && data.lat > 0 && (11 - i) / (data.lat * 10) <= 1, origin: i == 11 }"></div>
    </div> -->
    <div class="ball" :style="`--x: calc(${-data.lat * 20}vh);--y: calc(${data.long * 20}vh)`"></div>
  </div>
</template>

<style scoped lang="less">
.gforce {
  width: 40vh;
  height: 40vh;
  position: absolute;
  bottom: 2rem;
  left: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px dashed #888;
  .ball {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #0F0;
    transform: translate(var(--x), var(--y));
  }
  .line {
    display: flex;
    align-items: center;
    .bar {
      width: 0.5rem;
      height: 1rem;
      background-color: #333;
      margin-right: 0.1rem;
      &.origin {
        width: 0.2rem;
        height: 3rem;
      }
      &.active {
        background-color: #0F0;
      }
    }
    &.longitudinal {
      flex-direction: column;
      margin-right: 1rem;
      .bar {
        height: 0.5rem;
        width: 1rem;
        margin-bottom: 0.1rem;
        &.origin {
          height: 0.2rem;
          width: 3rem;
        }
      }
    }

  }
}
</style>
